<template>
  <div class="mutli-send">
    <div class="head px-10">
      <div class="label">推送人数 （{{ contrast.length }}）</div>
      <el-button size="small" type="primary" @click="addContrast('friend')">添加好友</el-button>
      <el-button size="small" @click="addContrast('group')">添加群聊</el-button>
      <div class="label">发送内容</div>
      <el-button type="info" plain size="small" @click="addContent('text')">+文本</el-button>
      <el-button type="info" plain size="small" @click="addContent('image')">+图片</el-button>
      <el-button type="info" plain size="small" @click="addContent('file')">+文件</el-button>
    </div>
    <div class="center">
      <div class="list-left">
        <el-scrollbar height="90vh">
          <div class="w-full">
            <CardGrid :item="contrast" />
          </div>
        </el-scrollbar>
      </div>
      <div class="list-right">
        <el-scrollbar height="90vh">
          <div class="w-full">
            <TableGrid :item="content" />
          </div>
        </el-scrollbar>
      </div>
    </div>
    <div class="bottom px-10">
      <el-checkbox v-model="allChecked" @change="handleCheckAll">全选</el-checkbox>
      <el-button size="small" type="primary" style="margin-left: 145px;" :onclick="delChecked">删除勾选</el-button>
      <div style="position: absolute; right: 30px;">
        <el-button size="small" @click="goback">返回上一步</el-button>
        <el-button size="small" type="primary" @click="sendAtOnce">即时群发</el-button>
        <el-button size="small" type="primary" @click="sendTimed">定时群发</el-button>
      </div>
    </div>
  </div>
  <AddContent></AddContent>
  <AddContrast></AddContrast>
  <TimedConfig></TimedConfig>
</template>

<script>
import { mapState } from "vuex";
import emitter from "@/utils/mitt-bus";
import CardGrid from "./CardGrid.vue";
import TableGrid from "./TableGrid.vue";
import AddContent from "./AddContent.vue";
import AddContrast from "./AddContrast.vue";
import TimedConfig from "./TimedConfig.vue";
import { ElMessage } from 'element-plus';

export default {
  data() {
    return {
      allChecked: false,
      contrast: [],
      content: []
    };
  },
  components: {
    TableGrid,
    CardGrid,
    AddContent,
    AddContrast,
    TimedConfig,
  },
  computed: {
    ...mapState({
      userList: (state) => state.contrast.userList,
      groupList: (state) => state.contrast.groupList,
    }),
  },
  async mounted() {
    emitter.on("onAddContent", ({ type, content }) => {
      this.content.push({
        id: this.content.length + 1,
        type: type,
        content: content,
      })
    });

    emitter.on("onAddContrast", ({ type, contrast }) => {
      this.contrast.push(...contrast)
    });

    emitter.on("onAddTimedTask", ({ time, timeTag }) => {
      this.$store.dispatch("addTimedTask", { content: this.content, contrast: this.contrast, time, timeTag })
      this.clearState()
      this.goback()
    })
  },
  beforeUnmount() {
    emitter.off('onAddTimedTask');
  },
  methods: {
    sendAtOnce() {
      if (this.contrast.length == 0 || this.content.length == 0) {
        ElMessage.error('对象或内容不能为空')
        return
      }
      this.$store.dispatch("addNowTask", { content: this.content, contrast: this.contrast, type: 0 })
      this.clearState()
      this.goback()
    },
    sendTimed() {
      if (this.contrast.length == 0 || this.content.length == 0) {
        ElMessage.error('对象或内容不能为空')
        return
      }
      emitter.emit("openTimedConfigDialog")
    },
    addContrast(type) {
      emitter.emit("openContrastDialog", { type: type, item: type === 'friend' ? this.userList : this.groupList });
    },
    async addContent(type) {
      if (type === 'text') {
        emitter.emit("openContentDialog", type);
      } else {
        const filePath = await this.openLocalFile(type)
        if (filePath) {
          this.content.push({
            id: this.content.length + 1,
            type: type,
            content: filePath,
          })
        }
      }
    },
    openLocalFile(type) {
      let options = {}
      if (type === 'image') {
        options = {
          title: '选择',
          filters: [
            { name: 'Images', extensions: ['jpg', 'png', 'jpeg', 'gif'] }
          ]
        }
      } else if (type === 'file') {
        options = {
          properties: ['openFile']
        }
      }

      return window.electronAPI.selectOpenFile(options)
    },
    delChecked() {
      const uncheckContrast = this.contrast.filter((row) => !row.checked)
      // this.contrast = this.contrast.filter((row) => !row.checked)
      this.contrast.forEach((row) => {
        row.checked = false;
      });
      this.contrast = uncheckContrast;

      this.content = this.content.filter((row) => !row.checked)
      this.content.forEach((row, index) => {
        row.checked = false;
        row.id = index + 1;
      });

      this.allChecked = false
    },
    handleCheckAll(val) {
      this.contrast.forEach((row) => {
        row.checked = val;
      });
      this.content.forEach((row) => {
        row.checked = val;
      });
    },
    clearState() {
      this.allChecked = false
      this.contrast = []
      this.content = []
    },
    goback() {
      emitter.emit("switchToTaskInfo")
    },
  },
};
</script>

<style lang="scss" scoped>
.mutli-send {
  width: calc(100vw - 68px);
  height: calc(100vh - 36px);
  display: flex;
  flex-direction: column;
}

.head {
  height: 45px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-border-default);
}

.center {
  height: calc(100vh - 126px);
  display: flex;
}

.bottom {
  position: relative;
  height: 45px;
  display: flex;
  align-items: center;
}

.list-left {
  width: 280px;
  min-width: 280px;
  height: 100%;
  padding: 3px 8px 8px;
  border-right: 1px solid var(--color-border-default);
  font-size: 12px
}

.list-right {
  width: calc(100% - 280px);
  height: 100%;
}

.label {
  font-size: 12px;
  font-weight: bolder;
  margin: 0 10px;
}
</style>
@/api/wx@/plugins/task